<!--        @node-drag-over="handleNodeDragOver"-->
<template>
  <div>
    <el-tree
        :data="treeData"
        node-key="id"
        draggable
        :props="defaultProps"
        :allow-drop="handleAllowDrop"
        @node-drag-start="handleNodeDragStart"
        :default-expand-all="true"
        style="width: 150px"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <el-image v-if="node.data.index >= 0" :src="imgsrc( node.data.sicon )" class="clssvg"   alt="svg display"  />
<!--          <el-image  v-if="node.data.index >= 0" src="images/logo.png" class="clssvg"   alt="svg display"  />-->
<!--          <img  v-if="node.data.index >= 0" :src="imgsrc( node.data.sicon )" class="clssvg"   alt="svg display"  />-->
          <span>{{ node.label }}</span>
        </span>
      </template>

<!--      <span slot-scope="{ node, data }" class="custom-tree-node">-->
<!--        {{ node.label }}-->
<!--        <i class="el-icon-document-add" @click.stop="handleAddChild(node, data)"></i>-->
<!--      </span>-->
    </el-tree>

<!--    <el-icon><Plus /></el-icon>-->

    <div
        ref="targetDiv"
        class="target-div"
        @dragover.prevent="handleDragOver"
        @drop="handleDrop"
    >
      Drop here
    </div>
    <br>
    <el-icon><Minus /></el-icon>
    <el-icon><Plus /></el-icon>
  </div>
</template>

<script>

import {Minus, Plus} from '@element-plus/icons-vue';
import {drawTool} from "@/utils/drawdat/drawtool"

export default {
  components:{Minus, Plus},
  data() {
    return {
      treeData: drawTool ,
      draggedNode: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  methods: {
    handleNodeDragStart(node, event) {
      console.log( "drag start:",   node.data.index  )
      console.log( "drag start:",   node  )
      // console.log( "drag start:",   event )
      this.draggedNode = node;
      event.dataTransfer.setData('text/plain', node.data.index);
    },

    handleDragOver( event) {
      event.preventDefault();
    },

    handleAllowDrop( draggingNode, dropNode, type ){
      return false
    },

    handleDrop(event) {
      event.preventDefault();
      const nodeId = event.dataTransfer.getData('text/plain');
      const targetNode = this.treeData.find(item => item.id === parseInt(nodeId));
      console.log('Dropped:', nodeId, targetNode );
      if (this.draggedNode && targetNode) {
        // 处理拖拽逻辑
        console.log('Dropped1:', targetNode.label);
        // this.treeData.splice(this.treeData.indexOf(targetNode), 1); // 移除节点
        // this.$refs.targetDiv.appendChild(targetNode); // 将节点附加到目标 div 中
        // 这里可能需要根据实际情况更新 `treeData`，以便反映拖拽后的结构
      }
    },
    handleAddChild(node, data) {
      console.log('Add child to node:', node, data);
    },

    imgsrc( icon ){
      return "images/" + icon
    },

  }
};
</script>

<style scoped>
.target-div {
  width: 400px;
  height: 200px;
  border: 2px dashed #ccc;
  text-align: center;
  line-height: 200px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.clssvg{
  width: 20px;
  height: 20px;
}
</style>